<template>
  <el-dialog title="中心挂号" :close-on-click-modal="false" :visible.sync="visible" fullscreen center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-divider content-position="left">顾客信息</el-divider>
    <el-form inline>
      <el-row style="background-color: #ecf5ff;padding: 5px 10px;">
          <el-form-item label="会员卡号">
            <el-input v-model="customerData.customerCard"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain icon="el-icon-search" @click="searchCustomer">查询</el-button>
            <el-button type="info" plain icon="el-icon-s-custom">读取</el-button>
          </el-form-item>
          <el-form-item label="会员姓名">
            <el-input v-model="customerData.name" readonly></el-input>
          </el-form-item>
      </el-row>
      <el-row style="background-color: #ecf5ff;padding: 5px 10px;margin-top: 5px;">
        <el-col :span="12">
          <el-form-item label="挂号类型">
            <el-select v-model="feeType" @change="feeTypeChange">
              <el-option value="1" label="挂号"></el-option>
              <el-option value="2" label="退费"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检查类别">
            <el-select v-model="registerForm.checkType" @change="checkTypeChange">
              <el-option v-for="item in checkTypeOptions" :value="item.id" :label="item.name + ' ￥' + item.price" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-divider content-position="left">代收费项目</el-divider>
      <el-table class="miui-table" :data="checkTypeList" border style="margin-bottom: 15px;">
        <el-table-column prop="name" label="检查项目"></el-table-column>
        <el-table-column prop="price" label="检查金额"></el-table-column>
      </el-table>

      <el-form label-width="80px" style="margin-bottom: 15px;">
        <el-row style="background-color: #ecf5ff;padding: 5px 10px;">
          <el-col :span="4">
            <el-form-item label="应缴金额">
              <el-input v-model="paidPrice" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="缴费金额">
              <el-input v-model="payValue" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>
      </el-form>
      <payment-form :paymentDataList="paymentDataList" :paidPrice="paidPrice" @refreshFormData="getPaymentValue"  :show="true"></payment-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="paymentHandle" :loading="ischeck" v-prevent-re-click>缴 费</el-button>
    </span>
    <!--  弹窗, 选择客户  -->
    <search-customer v-if="customerSearchVisible" ref="customerSearch" @refreshForm="updateForm"></search-customer>
  </el-dialog>
</template>

<script>
  import {mapGetters} from 'vuex'

  import SearchCustomer from '@/components/business/customer-search'
  import PaymentForm from '@/components/business/Payment'

  import { getSaleDetail, paymentConduct } from '@/api/eims/cashier/payment'
  import { getRegisterCenterPage, saveRegisterCenter } from '@/api/eims/cashier/register'
  import { getRegisterConfigList } from '@/api/eims/register-config'
  import {getCustomerInfoObj} from '@/api/eims/customer'

  export default {
    props:['saleDataList'],
    data() {
      return {
        ischeck: false,
        visible: false,
        customerData: {},
        feeType: '1',
        checkTypeOptions: [],
        registerForm: {
          checkType: ''
        },
        checkTypeList: [],
        paymentDataList: [
          {method: '1', name: '现金',button: false, cost: ''},
          {method: '2', name: '积分',button: true, cost: ''},
          {method: '3', name: '储值卡',button: true, cost: ''},
          {method: '4', name: '银行卡',button: true, cost: ''},
          {method: '5', name: '代金券',button: true, cost: ''},
        ],
        visibleData: {
          money: false,
          integral: true,
          bankCard: true,
          storeCard: true,
          coupon: true
        },
        paymentData: {
          money: '',
          integral: '',
          bankCard: '',
          storeCard: '',
          coupon: ''
        },
        paidPrice: '',
        payValue: '',
        customerSearchVisible: false
      }
    },
    components:{
      SearchCustomer,
      PaymentForm
    },
    computed: {
      ...mapGetters(['permissions','userInfo'])
    },
    methods:{
      // 打开弹窗，初始化数据
      init(){
        this.visible = true
        this.$nextTick(() => {
            this.getCheckTypeList()
        })
      },
      //  获取缴费数据
      getPaymentValue(data) {
        this.payValue = data
      },

      //  表单提交，缴费
      paymentHandle() {
        let list = []
          if(!this.customerData.customerCard){
              this.$message.warning('请选择会员')
              return false
          }
          if(!this.registerForm.checkType){
              this.$message.warning('请选择检查类型')
              return false
          }
        for(let key in this.paymentData){
          if(this.paymentData[key]){
            switch (key) {
              case 'money':
                list.push({method: '1',totalPrice: this.paymentData[key]})
                break
              case 'integral':
                list.push({method: '2',totalPrice: this.paymentData[key]})
                break
              case 'storeCard':
                list.push({method: '3',totalPrice: this.paymentData[key]})
                break
              case 'bankCard':
                list.push({method: '4',totalPrice: this.paymentData[key]})
                break
            }
          }
        }
        this.ischeck = true
        this.payInfo = list
        let payInfoDTO = { registerConfigId: this.registerForm.checkType, customerId:this.customerData.id,detailList: this.payInfo }

        if(this.payValue == this.paidPrice) {
          saveRegisterCenter(payInfoDTO).then(response => {
            if(response.data.code == '0'){
             this.$message.success('挂号成功')
             this.visible = false
             this.$emit('refreshDataList')
            }else{
              this.$message.error(response.data.msg)
            }
            this.ischeck = false
          }).catch(() => {
            this.ischeck = false
          })
        }else{
          this.$message.warning('请核对缴费金额')
          this.ischeck = false
        }
      },
        //  查询客户
        searchCustomer() {
          this.customerSearchVisible = true
            this.$nextTick(() => {
                this.$refs.customerSearch.init()
            })
        },
        // 获取客户信息
        updateForm(data) {
          console.log(data)
            this.customerData = data
        },
        //  选择挂号类型
        feeTypeChange(val) {
          this.registerForm.checkType = ''
          this.checkTypeOptions = []
            this.checkTypeList = []
            this.getCheckTypeList()
        },
        //  获取检查类型列表
        getCheckTypeList() {
            getRegisterConfigList({feeType: this.feeType}).then(response => {
              if(response.data.code == '0'){
               let resultData = response.data.data;
               let list = []
               resultData.forEach(item => {
                   if(item.type == '1'){
                       list.push(item)
                   }
               })
               this.checkTypeOptions = list
              }else{
                this.$message.error(response.data.msg)
              }
                
            })
        },
        //  选择检查类型
        checkTypeChange(val) {
          let list = []
            this.checkTypeOptions.forEach(item => {
                if(item.id == val){
                    this.paidPrice = item.price
                    this.paymentData.money = item.price
                    list.push(item)
                }
            })
          this.checkTypeList = list

        },
      clearAllInput() {
        for(let key in this.paymentData){
          this.paymentData[key] = ''
        }
      }

    }
  }
</script>

<style lang="scss" scoped>
  table tr td {
    border: solid 1px red;
    padding: 3px 8px;
  }
</style>
